body, html { font-size: 100%; 	padding: 0; margin: 0; overflow:hidden;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

body{
    font-weight: 500;
    font-size: 1.05em;
    font-family: "Microsoft YaHei","閻庣懓顑勭紞锟�","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{
	color: #2fa0ec;
	text-decoration: none;
	outline: none;
}
a:hover,a:focus{color:#74777b;}

/*nav*/

.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }

.toggleWrap .searchTab{
	width: 60%;
	height: 34px;
    padding: 0 2%;
}
.wrapFirst{
	width: 100%;
	height: 34px;
	margin-top: 5px;
}

.searchTab span:first-child,.category span:first-child{
/* 	width: 15%; */
	height: 34px;
	font-size: 13px;
	line-height: 38px;
	display: inline-block;
	/* color: #999; */
	color: #555; 
	float: left;
	overflow: hidden;
}
.searchCondition{
	position: absolute;
    right: 0px;
    top: 60px;
}

/* searchTab */
.searchTab .input-group-btn{
	display:  table-cell; 
	min-width: 0px; 
}
.searchTab .glyphicon-search{
	margin-top: -1px;
}
.toggleWrap .searchTab{
	margin-top: 0;
}

/* .tabs-vertical ul{
	width: 165px;
	width: 26%;
	height: 34px;
	list-style: none;
	margin-bottom: 0px;
	display: inline-block;
    float: left;
}
.tabs-vertical .timeul li{
	width: 50%;
	float: left; 
} */
.tabs-content-placeholder{
	padding-left: 70px;
}
.tab-content-div{
	display: none; 
}
.tab-content-div a{
    width: 55px;
    height: 34px;
    line-height: 34px;
    color: #777;
    display: inline-block;
    text-align: -webkit-center;
    font-size: 13px;
    border-top: solid 1px rgba(236, 226, 226, 0.34);
}
.tab-content-input{
	/* margin-left: 2%; */
    width: 40%;
}
.tab-content-input,.tab-content-input div{
	color: #555;
	font-size: 12px;
	float: left;
}
.tab-content-input  .global {
    padding: 0;
}
.tab-content-input  .global input{
    width: 100%;
    font-size: 12px;
    text-align: -webkit-center;
}
.tab-content-div a.active,#searchChoiceShow a.active{
	color: #1E87F0;
    border-bottom: 1px solid #1E87F0; 
    font-weight: 600;
    border-left: solid 1px rgba(236, 226, 226, 0.34);
    border-right: solid 1px rgba(236, 226, 226, 0.34);
    border-top: none;
    box-shadow: 1px 1px 1px rgba(236, 226, 226, 0.34);
    background: rgba(236, 226, 226, 0.08);
}
.tab-content-div a:first-child.active{
	border-left: none;
	box-shadow: none;
}
.tab-content-div a:last-child.active{
	border-right: none;
    box-shadow: none;
}
.tabs-vertical .tabs-content-placeholder div.tab-content-active{
    display: block;
}

/* serverAddress */

.serverAddress label{
	width: 100px;
	font-size: 14px;
	font-weight: lighter;
	color: #999;
	line-height: 34px;
    display: inline-block;
}
.serverAddress .form-group textarea{
	width: 200px;
	height: 34px;
    resize: none;
    margin-top: 5px;
    margin-left: 10px;
	display: inline-block;
}

/* category */
.category label{
    font-size: 13px;
    color: #777;
}


/* 甯哥敤鏃堕棿 */
.tabs-content-placeholder .radio-inline{
	font-size: 12px;
    color: #777;
    width: 25%;
    overflow: hidden;
    white-space: nowrap;
}
.tabs-content-placeholder .commonTime{
	padding: 7px 2%;
}
.tabs-content-placeholder .customTime .wrapInput{
	margin-left: 0px;
}
.timToIcon{
	height: 34px;
    line-height: 34px;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
}
.toggleWrap .tabs-vertical{
	width: 40%;
	float: left;
} 
/* 鍥捐〃閫夋嫨  */
.categoryServerResources{
	width: 100%;
    height: 34px;
    margin-top: 5px;
    padding-left: 2%;
}
.categoryServerResources span:first-child{
    width: 74px;
    height: 34px;
    color: #777;
    font-size: 13px;
    line-height: 34px;
    float: left;
    text-align: -webkit-right;
}
.categoryServerResources label{
    width: 11%;
    font-size: 13px;
    color: #777;
    overflow: hidden;
    white-space: nowrap;
}
.categoryServerResources label:first-child{
	margin-left: 2%;
}
.serverResources{
	height: 34px;
    width: 100%;
    padding: 7px 70px;
}

.bottom_wrap{
	height: 430px;
    background: #fff;
    padding: 10px; 
    /* padding: 28px; 
	padding-top: 10px;  */
	margin-left: 15px;
    margin-top: 5px;
    position: relative;
}
.tabContentDiv{
	height: 360px;
}
#categoryShow{
	padding: 0;
	position: absolute;
}
#categoryShow a{
	position: relative;
	/* width: 123px;  */
	/* width: 10%; */
    padding: 7px 0px;
    font-size: 13px;
	margin: 0;
	text-align: -webkit-center;
    background: #F7F7F7;
    transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -webkit-transition: all 0.5s linear 0s;
    -o-transition: all 0.5s linear 0s;
    border-left: solid 2px rgba(204, 204, 204, 0.42);
    
    transition: font-weight 0s linear 0s;
    -moz-transition: font-weight 0s linear 0s;
    -webkit-transition: font-weight 0s linear 0s;
    -o-transition: font-weight 0s linear 0s;
    
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
#categoryShow a:hover{
	border-bottom: none;
    color: darkmagenta;
    background: #DFDFDF;
    font-weight: 600;
}
#categoryShow a.active{
	border-bottom: none;
    /* color: #1E87F0; */
    color: darkmagenta;
    background: white;
    font-weight: 600;
}
#categoryShow .de{
    display: inline-block;
    width: 9px;
    height: 10px;
    background: url(../../images/images/de.png) no-repeat;
    /* margin-left: 10px; */
    position: absolute;
    top: 6px;
    right: 1px;
}
.tabMove{
	display: none;
    margin-left: 15px; 
    width: 100%;
    height: 43px;
    margin-top: 5px;
    position: relative;
}
.tabMilldel{
    float: left;
  	width: 90%;
    height: 42px;
    position: absolute;
    background: #F7F7F7;
    left: 5%;
    overflow: hidden;
}
.tabMove .tabToLeft{
	right: 15px;
}
.tabMove .tabToLeft,.tabMove .tabToRight{
	width: 5%;
    height: 42px;
    float: left;
    text-align: -webkit-center;
    line-height: 38px;
    color: white;
    cursor: pointer;
    background: rgba(0, 153, 255, 1);
    transition: all 0.5s linear 0s;
    -moz-transition: all 0.5s linear 0s;
    -webkit-transition: all 0.5s linear 0s;
     position: absolute;
}
.tabMove .tabToLeft:hover,.tabMove .tabToRight:hover{
	background: #1E87F0; 
}
.bottom_wrap .tab-content .logTable thead tr th:first-child(1){
	width: 100px;
}
.bottom_wrap table thead tr th:first-child(1){
	width: 100px;
}
.logTable {
	table-layout: fixed;
	font-size: 14px;
}
.logTable thead th{
	font-weight: normal;
}
.logTable td{
	overflow: hidden;
	overflow-wrap:break-word;
	font-size: 13px;
}
.logTable tbody tr:hover td{
/* 	background: #1E87F0 !important;  */
	color: white;
	background: rgba(0, 153, 255, 1); !important;
} 

.addCateBtn{
    padding: 0 8px;
    border: solid 1px #CCCCCC;
    border-right: none;
    text-align: -webkit-center;
    color: #777;
    font-size: 13px;
    float: initial;
    cursor: pointer;
    user-select: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
   
}
.addCateBtn:hover,.addCateBtn.active{
	background: #E6E6E6;
}
.choicTimBtn{
    height: 34px;
    width: 70px;
    line-height: 34px;
    border: solid 1px #CCCCCC; 
  /*   box-shadow: 1px 1px 1px #CCCCCC;
    background: #F7F7F7; */
    text-align: -webkit-center;
    color: #777;
    font-size: 13px;
    float: left;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

/* 鎼滅储妗嗚嚜鍔ㄥ尮閰� */

.ui-draggable, .ui-droppable {background-position: top;}

/* 鍏抽敭璇嶉珮浜樉绀哄姛鑳� */

.highlight{background-color: yellow;}

/* 鍝嶅簲寮� */
@media (max-width: 700px) {

/*     .tabs-vertical ul{
        float: none;
    }

    .tabs-vertical ul li{
        display: inline-block;
        margin-bottom: -1px;
    }

    .tabs-vertical ul li a{
        border: 1px solid transparent;
        border-bottom: 0;
        border-top: 0;
       	padding: 12px 15px;
       
    }

    .tabs-vertical ul li a.tab-active {
        border-color: #dddddd;
        background-color: #ffffff;
        box-shadow: 2px 0px 0px #EFEFEF;
    }

    .tabs-vertical ul li:first-child a{
        border-left: 0;
    }

    .tabs-vertical .tabs-content-placeholder{
        padding: 15px 30px 30px;
        border-left: 0;
        border-top: 1px solid #dddddd;
        box-shadow: 0px -3px 0px #F3F3F3;
    } */
    
    .wrapFirst{
    	height: 100px;
    }
    .tabs-vertical{
   	width: 100%;
	height: 50px;
    display:block;
    float: none;
    height: -webkit-fill-available !important;
    }
    .toggleWrap .tabs-content-placeholder{
    	width: 100%;
    	float: none;
    }
    .toggleWrap .searchTab{
	width: 100%;
	height: 34px;
	display: block;
    float: none;
}
	.category{
		height: -webkit-fill-available !important;
	}
}
@media only screen and (max-width: 800px){
	.bottom_wrap{
		margin-left:0;
	}
	.toggleWrap .tabs-vertical {
    	width: 50%;
    	height: 34px;
	}
	.toggleWrap .searchTab {
    	width: 50%;
    	height: 34px;
	}
	.tabMove {
    	margin-left: 0px;
	}
	.tabMove .tabToLeft {
    	right: 0;
	}
	.tabMove .tabToLeft,.tabMove .tabToRight {
    	width: 4%;
	}
	.tabMilldel {
    	width: 92%;
    	left: 4%;
	}
}
@media all and (min-width: 800px) and (max-width: 1024px){
	.toggleWrap .searchTab {
   		width: 55%;
	}
	.toggleWrap .tabs-vertical {
    	width: 45%;
	}
	.categoryServerResources label {
  	  	width: 14%;
	}
}
